/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #FFFFFF;
		color: #333333;



		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;

		align-items: center;
	}

	.wrapper header .fa-user-circle {
		margin-left: 3vw;
		color: #0097EF;
		margin-top: 1vw;
		font-size: 6.5vw;
	}

	.wrapper header .fa-cog {
		margin-left: 48vw;
		font-size: 4.6vw;
	}

	.wrapper header .fa-commenting-o {
		margin-left: 4vw;
		font-size: 4.6vw;
	}

	.wrapper header .location-text {
		margin-top: 1vw;
		margin-left: 1vw;
		font-size: 3.8vw;

	}




	/****************** 留白部分 ******************/
	.wrapper .blank1 {
		width: 100%;
		height: 12vw;
		background-color: #FFFFFF;
	}


	/****************** 会员部分 ******************/


	.wrapper .business {
		width: 95%;
		margin: 0 auto;
		height: 5vw;
		background-color: #333333;
		border-radius: 50px 50px 0 0;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		border-radius: 50px 50px 0 0;
		padding: 3vw;
		user-select: none;
		background-color: #333333;

		display: flex;
	}

	.wrapper .business li img {
		width: 13vw;
		height: 10vw;
	}

	.wrapper .business li .business-info {
		width: 100%;
		box-sizing: border-box;
		padding-left: 1vw;
	}

	.wrapper .business li .business-info .business-info-h {
		display: flex;
		justify-content: space-between;
		align-items: center;

		margin-top: 20vm;
	}

	.wrapper .business li .business-info .business-info-h h3 {
		font-size: 5vw;
		font-weight: bold;
		color: #FEC80E;

	}

	.wrapper .business li .business-info .business-info-h .w3-border {
		width: 30%;
		margin-left: 10vw;
	}


	.wrapper .business2 {
		width: 95%;
		margin: 0 auto;
		height: 6vw;
		background-color: #333333;
	}

	.wrapper .business2 li {
		width: 100%;
		box-sizing: border-box;
		padding: 3vw;
		user-select: none;


		display: flex;
	}

	.wrapper .business2 li .business2-info .business2-info-h h3 {
		font-size: 2vw;
		font-weight: 700;
		padding-left: 71vw;
		color: #666666;

	}

	.wrapper .business3 {
		width: 95%;
		margin: 0 auto;
		height: 11vw;
		background-color: #333333;
	}

	.wrapper .business3 li {
		width: 100%;
		box-sizing: border-box;
		padding: 3vw;
		user-select: none;


		display: flex;
	}

	.wrapper .business3 li .business3-info .business3-info-h h3 {
		font-size: 3vw;
		padding-left: 0.5vw;
		color: #AAAAAA;
		letter-spacing: 0.3vw;
	}





	.wrapper .business4 {
		width: 95%;
		margin: 0 auto;
		height: 1.5vw;
		background-color: #505051;
	}

	.wrapper .business4 li {
		width: 100%;
		box-sizing: border-box;
		padding: 3vw;
		user-select: none;
		display: flex;
	}

	.wrapper .business4 li .business4-info .business4-info-h h3 {
		font-size: 5vw;
		padding-left: 11vw;
		font-weight: bold;
		color: #AAAAAA;
		letter-spacing: 0.3vw;
		justify-content: center;
		align-items: center;
	}




	.wrapper .business6 {
		width: 95%;
		margin: 0 auto;
		height: 0vw;
		background-color: #666666;
	}

	.wrapper .business6 li {
		width: 100%;
		box-sizing: border-box;
		padding: 3vw;
		user-select: none;


		display: flex;
	}

	.wrapper .business6 li .business6-info .business6-info-h h3 {
		font-size: 3vw;
		padding-left: 0.5vw;
		color: #AAAAAA;
		letter-spacing: 0.3vw;
		justify-content: center;
		align-items: center;
	}






	.wrapper .business5 {
		width: 95%;
		margin: 0 auto;
		height: 10vw;
		background-color: #666666;
		border-radius: 0 0 50px 50px;
	}

	.wrapper .business5 li {
		width: 100%;
		box-sizing: border-box;
		padding: 3vw;
		user-select: none;


		display: flex;
	}

	.wrapper .business5 li .business5-info .business5-info-h h3 {
		font-size: 2vw;
		padding-left: 64vw;
		color: #AAAAAA;
		letter-spacing: 0.3vw;
		justify-content: center;
		align-items: center;
	}


	/****************** 广告部分 ******************/
	.wrapper .banner {

		width: 100%;
		margin: 0 auto;
		height: 29vw;


		/*此三个样式组合，可以保证背景图片充满整个容器*/
		background-image: url(../assets/index_banner.jpg);
		background-repeat: no-repeat;
		background-size: cover;

		box-sizing: border-box;
		padding: 70vw 10vw 0vw 10vw;
	}

	/****************** 留白部分 ******************/
	.wrapper .blank2 {
		width: 100%;
		height: 4vw;
		background-color: #FFFFFF;
	}


	/*服务分类*/
	.wrapper .foodtype {
		width: 100%;
		height: 48vw;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		/*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
		align-content: center;
	}

	.wrapper .foodtype li {
		/*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
		width: 22vw;
		height: 18vw;

		display: flex;
		/*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
		flex-direction: column;
		justify-content: center;
		align-items: center;

		user-select: none;
		cursor: pointer;
	}

	.wrapper .foodtype li img {
		width: 8vw;
		/*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
		height: 8vw;
	}

	.wrapper .foodtype li p {
		font-size: 3.2vw;
		color: #666;
	}

	/****************** 底部留白部分 ******************/
	.wrapper .blank3 {
		width: 100%;
		height: 16vw;
		background-color: #FFFFFF;
	}
	/****************** 底部菜单部分 ******************/
	.wrapper .footer{
	    width: 100%;
	    height: 14vw;
	    border-top: solid 1px #DDD;
	    background-color: #fff;
		
	 
	    position: fixed;
	    left: 0;
	    bottom: 0;
	 
	    display: flex;
	    justify-content: space-around;
	    align-items: center; 
	}
	.wrapper .footer li{
	    /*li本身的尺寸完全由内容撑起*/
	    display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		 
		color: #999;
		user-select: none;
		cursor: pointer; 
	}
	.wrapper .footer li p{
	    font-size: 2.8vw; 
	}
	.wrapper .footer li i{
	    font-size: 5vw; 
	}
	